import React, { useCallback, useContext } from "react";
// import {
//   AppContext,
//   AppContextProvider,
// } from "@/web/core/app/context/appContext";

import dynamic from "next/dynamic";
import Head from "next/head";
import { Box } from "@chakra-ui/react";
import { useRouter } from "next/router";
import AppContextProvider,{AppDetailContext} from "@/context/app/detail/appDetailContext";

enum TabEnum {
  "simpleEdit" = "simpleEdit",
  "adEdit" = "adEdit",
  "publish" = "publish",
  "logs" = "logs",
  "startChat" = "startChat",
}

const FlowEdit = dynamic(() => import("./components/FlowEdit"), {});


const AppDetail = () => {
  const {appDetail,loadingApp} = useContext(AppDetailContext)
  console.log('appDetai',appDetail);
  const router = useRouter();
  const setCurrentTab = useCallback(
    (tab: TabEnum) => {
      router.push({
        query: {
          ...router.query,
          currentTab: tab,
        },
      });
    },
    [router]
  );

  const onCloseFlowEdit = useCallback(
    () => setCurrentTab(TabEnum.simpleEdit),
    [setCurrentTab]
  );

  // const { appDetail, loadingApp } = useContextSelector(AppDetailContext, (e:any) => e);
  // console.log(appDetail);
  return (
    <>
      <Head>
        <title>{appDetail.name}</title>
      </Head>
      <div>
        {/* <Box flex={"1 0 0"} h={[0, "100%"]} overflow={["overlay", ""]}> */}
        <Box>
          {!loadingApp && (
             <FlowEdit onClose={onCloseFlowEdit} />
          )}
        </Box>
      </div>
    </>
  );
};

const Provider = ({
  appId,
  currentTab,
}: {
  appId: string;
  currentTab: any;
}) => {
  return (
    <AppContextProvider>
      <AppDetail></AppDetail>
    </AppContextProvider>
  );
};

export async function getServerSideProps(context: any) {
  const currentTab = context?.query?.currentTab || TabEnum.simpleEdit;
  const appId = context?.query?.appId || "22222";
  return {
    props: {
      currentTab,
      appId,
    },
  };
}

export default Provider;
